<template>
  <div>
    <TheHeader />
    <div>
      <h1>歌手页</h1>
      <div class="demo-fit">
        <div class="block" v-for="fit in singerList" :key="fit.id">
          <el-avatar
            class="avatar"
            shape="circle"
            :size="100"
            :src="url"
          ></el-avatar>
          <span>{{ fit.author }}</span>
        </div>
      </div>
    </div>
    <play-bar />
  </div>
</template>

<script>
import TheHeader from "../components/TheHeader.vue";
import PlayBar from "../components/PlayBar";
export default {
  name: "Singer",
  components: {
    TheHeader,
    PlayBar
  },
  created() {
    this.getSinger();
  },
  data() {
    return {
      url: "http://localhost:8888/upload-images/666.jpg",
      singerList: []
    };
  },
  methods: {
    getSinger() {
      this.$http
        .get("/song/" + 16 + "/" + 1)
        .catch(reason => {
          console.log(reason.data);
        })
        .then(response => {
          console.log(response);
          this.singerList = response.data.data.items;
        });
    }
  }
};
</script>

<style scoped>
.block {
  display: inline-block;
  padding: 30px;
}
.block:hover {
  background-color: #475669;
  color: #e5e9f2;
}
.block span {
  font-size: 25px;
}
.avatar {
  display: block;
}
</style>
